<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<!-- <u-navbar :is-back="false" title="首页" :background="{background:'#F2F2F2'}"></u-navbar> -->
		<view v-if="showTopTips == true" >
			<view style="height: 90rpx;"></view>
			<view class="topTips flex">
				<view class="flex_bd">您当前还未关注微信公众号</view>
				<view >
					<view class="flex">
						<view class="gzbtn flex_bd base-color"  @click="showqrcode=true">立即关注</view>
						<u-icon name="close" size="28" class="close_btn" @click="showTopTips=false"></u-icon>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="showqrcode?'show':''"  >
				<view class="cu-dialog qrcode-dialog"> 
				<u-icon name="close" class="cu-dialog-close"  @click="showqrcode=false"></u-icon>
					<view class="qrcode-container" >
						<view class="title" >
							长按二维码识别关注
						</view>
						<image mode="widthFix" style="width: 100%;" :src="weixin_qrcode" >
					</view>
				</view>
			</view>
		</view>
		<view class="u-page">
			<view v-if="is_diy == 0" class="page-body">
				默认商城
			</view>
			<view v-else class="page-body" :style="{background:pageInfo.page.background}">
				<diyPage :pageInfo="pageInfo"></diyPage>
			</view>
		</view>
		<tabbar :_current="0" :getCartNum="0"></tabbar>
		
	</view>
</template>


<script>
	import tabbar from '@/pages/shop/tabbar';
	import diyPage from '@/pages/shop/index/diyPage/index';
	export default {
		components: {
			tabbar,
			diyPage
		},
		data() {
			return {
				is_diy: -1,
				pageInfo: {
					page: {}
				},
				showTopTips:false,
				showqrcode:false,
				weixin_qrcode:''
			};
		},
		onLoad(options) {
			this.loadData();
			//微信公众号分享
			let setting = uni.getStorageSync('setting');
			this.weixin_qrcode = this.config.baseUrl+setting.weixin_qrcode;
			this.handleWxH5.share(this,setting.site_name,setting.description,this.config.baseUrl+setting.logo);
		},
		onShow(){
		},
		onHide(){
		},
		watch: {},
		computed: {},
		methods: {
			//请求数据
			async loadData() {
				let openid = this.app.getWxOpenId();
				this.$u.post('shop/api.Index/getIndexInfo',{openid:openid}).then(res => {
					this.is_diy = res.data.is_diy;
					this.pageInfo = res.data.page;
					this.showTopTips = res.data.tipsubscribe == 1 ? true : false;
					//console.log(this.pageInfo);
				})
			},
		}
	}
</script>

<style lang='scss'>
	.topTips{
		position:fixed;
		top:0px;
		left: 0px;
		width: 100%;
		padding: 20rpx;
		background-color: #000;
		color: #FFFFFF;
		line-height: 60rpx;
		z-index: 997;
	}
	.gzbtn{
		padding: 0rpx 20rpx;
		border-radius:20rpx ;
		background-color: #FFFFFF;
	}
	.close_btn{
		padding-left:20rpx;
	}
	.qrcode-dialog{
		background-color: transparent!important;
	}
	
	.qrcode-container {
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		padding:30upx;
		/* box-sizing: border-box; */
		color: #fff;
	}
	
	.qrcode-container .title {
		text-align: center;
		margin-bottom: 26upx;
		font-size: 40upx;
	}
	
	.close-cu-modal{
		color: #FFFFFF;
		position: absolute;
		
	}
</style>
